<template>
    <div class="number-drawer">
        <el-drawer :visible.sync="numDrawer" direction="rtl" size="512px" :before-close="handleClose">
            <template slot="title">
                <span style="font-size: 16px;
                      font-weight: 600;
                      color: #333;">变更数量</span>
            </template>
            <el-form ref="numForm" :model="numForm" :rules="rules">
                <el-row :gutter="gutter">
                    <el-col :span="14">
                        <el-form-item label="订单项：" prop="id"
                            style="margin-bottom: 0 !important;font-weight: 700;font-size: 16px;margin-left: 32px;">
                            <div class="item"> {{ numForm.id }}</div>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="下单日期：" prop="date" style="margin-bottom: 0 !important;color: #666;">
                            <div class="item"></div>{{ numForm.date }}
                        </el-form-item>
                    </el-col>
                </el-row>
                <div class="dialog-main">
                    <el-row :gutter="gutter">
                        <el-col :span="span">
                            <el-form-item label="型号：" prop="model">
                                <div class="item">{{ numForm.model }}</div>
                            </el-form-item>
                        </el-col>
                        <el-col :span="span">
                            <el-form-item label="品牌：" prop="brand">
                                <div class="item">{{ numForm.brand }}</div>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row :gutter="gutter">
                        <el-col :span="span">
                            <el-form-item label="数量：" prop="number">
                                <div class="item">{{ numForm.number }} </div>
                            </el-form-item>
                        </el-col>
                        <el-col :span="span">
                            <el-form-item label="批次：" prop="batch">
                                <div class="item"> {{ numForm.batch }}</div>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row :gutter="gutter">
                        <el-col :span="span">
                            <el-form-item label="封装：" prop="package">
                                <div class="item"> {{ numForm.package }}</div>
                            </el-form-item>
                        </el-col>
                        <el-col :span="span">
                            <el-form-item label="单价：" prop="price">
                                <div class="item">{{ numForm.price }}</div>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row :gutter="gutter">
                        <el-col :span="span">
                            <el-form-item label="币种：" prop="currency">
                                <div class="item">{{ numForm.currency }} </div>
                            </el-form-item>
                        </el-col>
                        <el-col :span="span">
                            <el-form-item label="订单金额：" prop="money">
                                <div class="item" style="color:red">{{ numForm.money }}</div>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row :gutter="gutter">
                        <el-col :span="span">
                            <el-form-item label="交货日期：" prop="goodDate">
                                <div class="item">{{ numForm.goodDate }}</div>
                            </el-form-item>
                        </el-col>
                        <el-col :span="span">
                            <el-form-item label="交货地：" prop="address">
                                <div class="item">{{ numForm.address }}</div>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row :gutter="gutter">
                        <el-col :span="span">
                            <el-form-item label="包装：" prop="packing">
                                <div class="item">{{ numForm.packing }}</div>
                            </el-form-item>
                        </el-col>
                        <el-col :span="span">
                            <el-form-item label="发票类型：" prop="invoiceType">
                                <div class="item"> {{ numForm.invoiceType }}</div>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </div>
                <el-row :gutter="gutter">
                    <el-col :span="span">
                        <el-form-item label="更改交货数量"
                            style="margin-bottom:0 !important;margin-left:32px;font-size:14px;font-weight:700;">
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="gutter" style=" margin: 10px 20px 10px 32px;">
                    <el-form-item label="交货数量：" prop="num">
                        <el-input type="number" v-model="numForm.num" style="width:78%" size="small"></el-input>
                    </el-form-item>
                </el-row>
                <el-row>
                    <el-col class="form-btn">
                        <el-form-item style="text-align: right;margin-right: 22px;">
                            <el-button style="background:#004FEE;color:#fff;" 
                                size="small">确定</el-button>
                            <el-button  size="small">取消</el-button>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
        </el-drawer>
    </div>
</template>

<script>
export default {
    name: "numberDrawer",
    props:["numDrawer"],
    data() {
        return {
            gutter: 5,
            span: 12,
            numForm: {
                id: "DD22020000295-001",
                date: "2023-02-20",
                model: "H1",
                brand: "KEMET",
                number: "100",
                batch: "1",
                package: "XXXW95",
                price: "10",
                currency: "人民币",
                money: "1000",
                goodDate: "2023-02-28",
                address: "北京",
                packing: "散装",
                invoiceType: "普通发票",
                num: "",
            },
            rules: {
                num: [{ required: true, message: '请选择数量', trigger: 'change' }]
            },
        }
    },
    methods:{
        handleClose(){
            this.$emit("close");
        } 
    }
}
</script>

<style scoped lang="scss">
.number-drawer {
    .dialog-main {
    border: 1px solid #eee;
    border-radius: 4px;
    padding: 10px 20px;
    margin: 7px 29px 22px 32px;

    .el-form-item{
      margin-bottom: 0 !important;
    }
    ::v-deep .el-form-item__label{
      color: #eee;
    }
    .item {
      text-align: end;
      margin-right: 20px;
      font-size: 12px;
      color: #333;
    }
  }
}
</style>